<!--
 * @Descripttion: 
 * @version: 
 * @Author: 
 * @Date: 2022-04-24 09:01:49
 * @LastEditors: weidelong
 * @LastEditTime: 2022-05-20 14:57:55
-->
<template>
    <div class="index" v-loading.body="loading">
        <el-row :gutter="20" class="top">
            <el-col :span="5">
                <h3>文章数 </h3>
                <div class="mid" style="color: #409eff;">{{ articleData.total }}</div>
                <!-- <p><span>已发布：{{ article.published }}</span><span>待审核：{{ article.audit }}</span></p> -->
            </el-col>
            <el-col :span="5">
                <h3>用户数 </h3>
                <div class="mid" style="color: #ff7d00;">{{ user.sum }}</div>
            </el-col>
            <el-col :span="5">
                <h3>已入驻医师 </h3>
                <div class="mid" style="color: #23c343;">{{ doctor.sum }}</div>
            </el-col>
            <el-col :span="7" class="msg" v-if="this.$store.state.username?.flag !== 'doctor'">
                <div>
                    <h3>
                        <el-badge :is-dot='isTrue' class="item">
                            消息提醒
                        </el-badge>
                    </h3>
                    <ul>
                        <li v-for="(item, index) in publisher" :key="index">{{item}}发表了一篇文章<span @click="goSH(index)">前往审核></span></li>
                    </ul>
                </div>
            </el-col>
        </el-row>
        <el-row class="content1">
            <!-- 平台用户趋势图 -->
            <el-col :span="17" class="content1-left" id="main">
                <div></div>
            </el-col>
            <el-col :span="7" class="content1-right">
                <h3>用户活跃榜TOP5</h3>
                <template v-for="item of userList" :key="item.key">
                    <div class="content1-right-content">
                    <div class="user-img">
                        <el-avatar size="large" :src="item.userImg"></el-avatar>
                    </div>
                    <div class="user-info">
                        <p>{{ item.key }}</p>
                        <p>动态发表数：<span>{{ item.value }}</span></p>
                    </div>
                </div>
                </template>
            </el-col>
        </el-row>
        <el-row class="content2">
            <el-col :span="17" class="content2-left"  id="doc">
                <div></div>
            </el-col>
            <el-col :span="7" class="content2-right" id="rose">
                <div></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCurrentInstance } from 'vue'
import { getBeforeDayTime } from '../../utils/index.js'
import { getAllArticleList } from '../../request/api/articleMange/articleMange'
import { getAllUserMobles, getAllDoctors, getSystemUsersData, getSystemArticleSource, getuserDynamicSort } from '../../request/api/home/index'

    export default {
        name: 'Index',
        components: {},
        data() {
            return {
                systemData: {
                    data: [10, 22, 28, 23, 19, 22, 28, 23, 19, 98],
                    time: ['2022-5-5', '2022-5-6', '2022-5-7', '2022-5-8', '2022-5-9', '2022-5-10', '2022-5-11', '2022-5-12', '2022-5-13', '2022-5-14']
                },
                articleData: {
                    author: ['点', '自', '动', '缩', '放'],
                    data: [220, 182, 191, 234, 290],
                    total: 0
                },
                user: {
                    nan: 0, // 男
                    nv: 0,  // 女
                    sum: 0
                },
                doctor: {
                    sum: 0,
                    nei: 0, // 内科
                    zhong: 0,  // 中医科
                    ying: 0,  // 营养科
                    xin: 0,  // 心理科
                    quan: 0  // 全科
                },
                // 用户活跃榜
                userList: [{
                    key: '王二狗',
                    value: 0,
                    userImg: ''
                }],
                loading: false
            }
        },
        computed: {
            publisher() {
                return this.$store.state.articleRemind
            },
            isTrue() {
                return this.publisher.length > 0 ? true : false
            }
        },
        watch: {},
        created() {
            
        },
        mounted() {
            this.platformChart()
            this.doctorArticlesData()
            this.doctorDepartmentData()
            this.articlesData()
            this.getUserDatas()
            this.getAllDoctors()
            this.getuserDynamic()
            this.renderData()
        },
        methods: {
            renderData() {
                this.platformChartRender()
                this.doctorDepartmentDataRender()
                this.doctorArticlesDataRender()
            },

            // 全部文章数据
            async articlesData() {
                const {data} = await getAllArticleList()
                if (data?.code === 0) {
                    this.articleData.total = data.total
                }
            },
            // 全部用户数据
            async getUserDatas() {
                this.loading = true
                const { data } = await getAllUserMobles()
                if (data?.code === 0) {
                    this.user.nan = data.nan
                    this.user.nv = data.nv
                    this.user.sum = data.userNum
                    this.loading = false
                }
                this.loading = false
            },
            // 全部医师数据
            async getAllDoctors() {
                const { data } = await getAllDoctors()
                if (data?.code === 0) {
                    this.doctor.sum = data.sum
                    this.doctor.nei = data.nei
                    this.doctor.zhong = data.zhong
                    this.doctor.ying = data.ying
                    this.doctor.xin = data.xin
                    this.doctor.quan = data.quan
                }
            },
            // 用户动态活跃榜top5
            async getuserDynamic() {
                const { data } = await getuserDynamicSort()
                if (data?.code === 0) {
                    this.userList = data.arr
                }
            },
                
            // 初始化平台日增长量
            platformChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('main'));
                if (getCurrentInstance()) {
                    const { proxy } = getCurrentInstance();
                    proxy?.$echartsResize(myChart)
                }
                const option = {
                    title: {
                        text: '平台日增长量'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        name: '时间',
                        axisTick: {
                            alignWithLabel: true,
                            length: '3'
                        },
                        boundaryGap: false, // 不留白，从原点开始
                        // 坐标轴刻度标签的相关设置
                        axisLabel: {
                            show: true,
                        },
                        show: true,
                        splitLine: {
                            show: false
                        },
                        splitNumber: 10,
                        data: this.systemData.time
                    },
                    yAxis: {
                        show: true,
                        name: '访问量',
                        nameGap: '16',
                        boundaryGap: false,
                    },
                    series: [
                        {
                            data: this.systemData.data,
                            type: 'line',
                            smooth: true,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    fontSize: 10,
                                    color: '#999'
                                }
                            },
                            emphasis : {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: 18,
                                        fontWeight: 700
                                    }
                                }
                            }
                        },
                    ]
                };
                // 绘制图表
                myChart.setOption(option)
                myChart.resize()
            },
            // 平台日增长量动态数据渲染
            platformChartRender() {
                // const timeArr = []
                // for(let i = 0; i < 10; i ++) {
                //    timeArr.push(getBeforeDayTime(i))
                // }
                let startTime = getBeforeDayTime(9)
                let endTime = getBeforeDayTime(-1)
                // return new Promise((resolve, reject) => {
                //     getSystemUsersData({time: timeArr}).then(res => {
                //         const { data } = res
                //         if (data?.code === 0) {
                //             this.systemData.time = Object.keys(data.obj).reverse()
                //             this.systemData.data = Object.values(data.obj).reverse()
                //             this.platformChart()
                //         }
                //     })
                // })
                return new Promise((resolve, reject) => {
                    getSystemUsersData({startTime, endTime}).then(res => {
                        const { data } = res
                        if (data?.code === 0) {
                            this.systemData.time = Object.keys(data.obj).reverse()
                            this.systemData.data = Object.values(data.obj).reverse()
                            this.platformChart()
                        }
                    })
                })
            },
            // 初始化医师文章数据
            doctorArticlesData() {
                let chart = echarts.init(document.getElementById('doc'));
                if (getCurrentInstance()) {
                    const { proxy } = getCurrentInstance();
                    proxy?.$echartsResize(chart)
                }
                const option = {
                    title: {
                        text: '文章来源统计',
                        // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: this.articleData.author,
                        axisLabel: {
                            inside: true,
                            color: '#fff'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#999'
                        }
                    },
                    series: [
                        {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ])
                            }
                        },
                        data: this.articleData.data
                        }
                    ]
                    };
                chart.setOption(option)
            },
            // 医师文章数据来源动态渲染
            doctorArticlesDataRender() {
                return new Promise((resolve, reject) => {
                    getSystemArticleSource({}).then(res => {
                        const { data } = res
                        if (data?.code === 0) {
                            this.articleData.author = Object.keys(data.obj)
                            this.articleData.data = Object.values(data.obj)
                            this.doctorArticlesData()
                        }
                    })
                })
            },
            // 初始化医师科室玫瑰图
            doctorDepartmentData() {
                let chart1 = echarts.init(document.getElementById('rose'));
                if (getCurrentInstance()) {
                    const { proxy } = getCurrentInstance();
                    proxy?.$echartsResize(chart1)
                }
                const option = {
                    title: {
                        text: '科室人数分布',
                        // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '10%',
                        left: 'center'
                    },
                    series: [
                        {
                        name: '科室人数',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: this.doctor.nei, name: '内科' },
                            { value: this.doctor.zhong, name: '中医科' },
                            { value: this.doctor.ying, name: '营养科' },
                            { value: this.doctor.xin, name: '心理科' },
                            { value: this.doctor.quan, name: '全科' }
                        ]
                        }
                    ]
                };
                chart1.setOption(option)
            },
            // 医师科室玫瑰图动态数据渲染
            doctorDepartmentDataRender() {
                return new Promise((resolve, reject) => {
                    getAllDoctors({}).then(res => {
                        const { data } = res
                        if (data?.code === 0) {
                            this.doctor.sum = data.sum
                            this.doctor.nei = data.nei
                            this.doctor.zhong = data.zhong
                            this.doctor.ying = data.ying
                            this.doctor.xin = data.xin
                            this.doctor.quan = data.quan
                            this.doctorDepartmentData()
                        }
                    })
                })
            },
            // 跳转审核
            goSH(index) {
                this.$router.push({ path: '/home/manage/audit'})
                this.$store.commit('deleteArticleRemindElement', index)
            }
        }
    }
</script>

<style lang="scss" scoped>
.index {
    height: 100%;
    overflow-y: scroll;
    padding: 16px;
    box-sizing: border-box;
    .top {
        box-sizing: border-box;
        min-height: 120px;
        // max-height: 120px;
        margin: 0 !important;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        .el-col {
            padding: 15px !important;
            // flex: 1;
            border: 1px solid rgb(220, 220, 220);
            color: #333;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            position: relative;
            // justify-content: space-between;
            .mid {
                text-align: center;
                font-size: 36px;
                flex: 1;
                // line-height: 82px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            p {
                font-size: 14px;
                color: #666;
                padding-bottom: 15px;
                display: flex;
                justify-content: space-between;
            }
        }
        .msg {
            div {
                height: 100%;
                 ul {
                    padding-top: 10px;
                    text-align: start;
                    // height: calc(100% - 25px);
                    font-size: 12px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */
                    -webkit-line-clamp: 3; /* 限制文本的行数，表示文本第多少行省略 */
                    text-overflow: hidden;/*  打点展示 */
                    overflow: hidden;/*超出部分进行隐藏*/
                    li {
                        display: flex;
                        justify-content: space-between;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        padding: 4px 0;
                        span {
                            color: skyblue;
                        }
                        span:hover {
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
    .content1 {
        min-height: 500px;
        margin-top: 16px;
        border-radius: 8px;
        flex-wrap: nowrap;
        .content1-left {
            padding: 12px;
            box-sizing: border-box;
            border: 1px solid rgb(220, 220, 220);
            border-radius: 8px;
            margin-right: 8px;
            // margin-right: 16px;
        }
        .content1-right {
            padding: 12px;
            box-sizing: border-box;
            border: 1px solid rgb(220, 220, 220);
            border-radius: 8px;
            margin-left: 8px;
            flex: 1;
            h5 {
                padding: 5px;
            }
            .content1-right-content {
                display: flex;
                align-items: center;
                padding: 15px 5px;
                .user-info {
                    margin-left: 15px;
                    font-size: 12px;
                    p:nth-child(1) {
                        font-size: 15px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .content2 {
        min-height: 500px;
        margin-top: 16px;
        border-radius: 8px;
        flex-wrap: nowrap;
        .content2-left {
            padding: 12px;
            box-sizing: border-box;
            border: 1px solid rgb(220, 220, 220);
            border-radius: 8px;
            margin-right: 8px;
        }
        .content2-right {
            padding: 12px;
            box-sizing: border-box;
            border: 1px solid rgb(220, 220, 220);
            margin-left: 8px;
            border-radius: 8px;
            flex: 1;
        }
    }
     h3 {
                // font-weight: lighter;
                font-size: 18px;
                font-family: '黑体';
            }
}
</style>
